<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>movement_run</title>
        <script type="text/javascript">
            window._AMapSecurityConfig = {
              securityJsCode:"6ce2ca65084d83ae8c4dcab2aaa80638",
            }
          </script>
          <script src="https://webapi.amap.com/loader.js"></script>
          <script type="text/javascript" >
            AMapLoader.load({
              key: "0019114c1b2ddc57f61421335f1b9318",       // 申请好的Web端开发者Key，首次调用 load 时必填
              version: "2.0",                 // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
            }).then((AMap)=>{
              const map = new AMap.Map('container',{
                center: [104.030106,30.676875],//中心点坐标
              });
            }).catch((e)=>{
              console.error(e);  //加载错误提示
            });   
          </script>
	</head>
	<body>
		<main class="movement_run">
			<div class="navbar"></div>
            <div class="data">
                <p>目前累积骑行距离</p>
                <p>
                    <strong></strong>
                    公里
                </p>
            </div>
		</main>
        <!-- 地图 -->
        <div class="mapbox">
            <div id="container">
                
            </div>
            <div class="maskbox">
                <div class="box">
                    <div class="go">GO</div>
                    <div class="btn">
                        <i class="iconfont icon-shezhi"></i>
                        <i class="iconfont icon-yinle1"></i>
                    </div>
                </div>
                <div class="route">
                    <div class="text">
                        <h4>骑行路线</h4>
                        <p>使用骑行路线,邂逅附近同行者</p>
                    </div>
                    <i class="iconfont icon-youjiantou"></i>
                </div>
            </div>
        </div>
        
		<nav class="tabbar"></nav>

        <!-- 蒙层 -->
        <div id="mask">3</div>

	</body>
</html>
